<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="2" id="selextTitle">${网页标题 }</title>
<meta name="keywords" content="${网页关键词}">
<meta name="description" content="${网页描述 }" />
<!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
<link
	href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css"
	rel="stylesheet" type="text/css">
<link
	href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css"
	rel="stylesheet" type="text/css" />
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet"
	type="text/css">
<link rel="shortcut icon" href="${浏览器logo }">
 <style>
        .banner{width: 100%}
        .banner img{width: 100%}
        .service-case{padding-top: 90px;padding-bottom: 55px;}
        .service-case ul{margin-top: 50px;overflow:hidden;}
        .service-case ul li{cursor: pointer;border:1px solid #f4f4f4;border-radius:10px;position:relative;padding-bottom: 12px;border-radius:8px;float: left;width: 265px;background:#ffffff;margin-right: 25px;}
        .service-case ul li:nth-of-type(4){margin-right: 0px;}
        .service-case ul li img{display:block;width: 240px;margin: 20px auto;height: 120px;}
        .service-case ul li .txt{font-size:16px;margin-left: 25px;color: #c6944e;}
        .a-wrap{margin-bottom: 60px;}
        .view-more{font-size:16px;margin: 0 auto;width: 170px;height: 42px;line-height: 42px;
        text-align: center;color: #a0a0a0;border: 1px solid #a0a0a0;border-radius: 20px;display: block}
        .view-more:hover{color: #fff;background: #c6944f;border: 1px solid #c6944f;}
        .menu-wrap{    position: relative;}
				
		.menu{position: absolute;z-index: 23;padding-top:12px;display:none;}
		.business-wrap{position: absolute;left:175px;top:11px;height:432px;}
    </style>

</head>
<body class="">
<div id="app">
	<jsp:include page="_top.jsp"></jsp:include>
	<div class="container menu-wrap wrap-box">
		<ul class="menu">
			<cms:ad var="items" code="ywfl"></cms:ad>
			<c:forEach var="item" items="${items }">
				<li @mouseover="selectAd('${item.adUrl }')"><a href="${item.adUrl }" target="blank"><img
						src="${item.adImg }" alt="">${item.adTitle }</a></li>
			</c:forEach>
		</ul>
		<div class="business-wrap">
           <div class="business-list" v-for="item in ads">
               <div class="img-box"><img :src="item.adImg" alt=""></div>
               <div>
                   <h4><a href="">{{item.adTitle}}</a></h4>
                   <div class="business-list-link">
                      {{item.adInfo1}}
                   </div>
                   <div class="btns"><a :href="item.adUrl">在线咨询</a><a target="blank" :href="item.adUrl">查看详情</a></div>
               </div>
           </div>
       </div>
	</div>
	<div class="banner">
		<cms:ad var="banner" code="cbanner" multi="false"></cms:ad>
		<img src="${banner.adImg}" alt="">
	</div>
        <div class="container" i>
            <div class="service-case">
                <div class="cases">
                    <ul>
                        <li v-for="item in arts" @click="toArticle(item.artId)" >
                            <img :src="item.artImage" alt="">
                            <span class="txt">{{item.artTitle}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="a-wrap" >
                <a  v-bind:style="{display:less}" href="javascript:void(0)"  v-on:click="loadArt()"  class="view-more ">查看更多</a>
                <a  v-bind:style="{display:more}" href="javascript:void(0)"  v-on:click="loadArt()"  class="view-more ">没有更多了</a>
            </div>
            
				
					
        </div>
		<jsp:include page="_foot.jsp"></jsp:include>
	</div>
</body>
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/AjaxProxy.js"></script>
<script type="text/javascript"
	src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/visitor/index.js"></script>
<script>
var app =  new Vue({
	el : '#app',
	data : {
		offset : 0,
		limit : 4,
		more:"none",
		less:"block",
		ads:[],
		arts:[]
	},
	methods : {
		toArticle : function(id) {
			window
					.open("${path}/redirect/serviceDetails?id="
							+ id);
		},
		selectAd:function(code){
			$.AjaxProxy({
				c : false,
				p : {
					"code" : code
				}
			}).invoke("${path}/findAd", function(loj) {
				app.ads = loj.getValue("rows");
			});
		},
		loadArt:function(){
			$.AjaxProxy({
				c : false,
				p : {
					"offset" : app.offset,
					"limit" : app.limit,
					"code":"fwal"
				}
			}).invoke(
					"${path}/findNews",
					function(loj) {
						
						if(loj.getValue("rows").length<1){
							app.more="block";
							app.less="none";
						}else{
							app.arts = app.arts.concat(loj.getValue("rows"));
						 	app.offset+=app.limit;
						}
					});
		}
	},
});
app.loadArt();


</script>

</body>
</html>
